<template>
  <div class="headers">
    <div class="logo">
      <span>
        <img src="../public/image/logo.png"
          alt="">
      </span>
    </div>
    <div class="name">
      <label>好客超级酒店管理平台</label>
    </div>
    <div class="help">
      <!-- <div class="servies"
        v-popover:servies
        style="background:#6d2377;">
        <div>
          <span><img src="../public/image/servies.png"
              alt=""></span>
        </div>
        <el-popover popper-class="header-popover"
          ref="servies"
          placement="bottom"
        
          width="160"
          trigger="hover">
          <div class="account">
            <a to="/Foo"
              style="color: #45a2ff; margin-left: 5px;">0731-12345678</a>
          </div>
          <div class="out">
            <a to="/Foo"
              style="color: #45a2ff; margin-left: 5px;">全天24小时服务</a>
          </div>
        </el-popover>
      </div> -->     
      <div class="identity"
        style="background:#6d2377;"
        v-popover:identity>     
        <span><img src="../public/image/user.png"
            alt=""></span>  
        {{name}}
        <el-popover popper-class="header-popover"
          ref="identity"
          placement="bottom"
          
          width="160"
          trigger="hover">
          <div class="account">
            <span class="fa fa-user-circle-o"></span>
            <router-link to="/index/account_information"
              style="color: #45a2ff; margin-left: 5px;">账号信息</router-link>
          </div>
          <div class="out">
            <span class="fa fa-power-off"></span>
            <el-button type="text"
              style="margin-left: 5px;"
              @click="exit">退出登录</el-button>
          </div>
        </el-popover>
      </div>
    </div>
  </div>
</template>

<script>
import url from "@/public/js/config";
export default {
  name: "Headers",
  data() {
    return {
      num: 200,
      active: false,
      name: "",
      settingItems: {
        Icon: [
          "easytrip-icon-account",
          "easytrip-icon-out",
          "easytrip-icon-account",
          "easytrip-icon-out"
        ]
      },
      supplier: false,
      company: false,
      accountcfg: false,
      departmentandstaff: false,
      count: null,
      toggleObj: [],
      role:''
    };
  },
  created() {
    window.commo.showMenu(this);
    this.name = sessionStorage.getItem("name");
  },
  mounted() {
    window.bus.$on("messageCount", res => {
      this.count = res;
    });
  },
  methods: {
    exit() {
      sessionStorage.removeItem("token");
      sessionStorage.removeItem("companyId");
      this.$router.push("/");
    }
  }
};
</script>

<style scoped lang="scss">
.account,
.out {
  span {
    font-size: 16px;
  }
}
.account:hover,
.out :hover {
  span {
    font-size: 16px;
    color: #6d2377;
  }
  a {
    color: #6d2377;
  }
}
.headers {
  overflow: auto;
  height: 64px;
  .logo {
    width: 200px;
    float: left;
    margin-top: 8px;
    span {
      display: block;
      width: 68%;
      margin-left: 14px;
      img {
        width: 100%;
      }
    }
  }
  .toggle {
    width: 300px;
    float: left;
    height: 64px;
    padding-left: 100px;
    display: flex;
    & > a {
      line-height: 64px;
      flex: 1;
      font-size: 16px;
      color: #fff;
      cursor: pointer;
    }
  }
  .name {
    float: left;
    text-align: left;
    font-size: 24px;
    margin-top: 15px;
  }
  .help {
    overflow: hidden;
    font-size: 16px;
    .identity,
    .setting,
    .servies {
      height: 64px;
      line-height: 64px;
    }
    .identity:hover,
    .setting:hover,
    .servies:hover {
      background-color: #6d2377;
    }
    .el-tooltip {
      cursor: pointer;
    }
    .identity {
      min-width: 115px;
      float: right;
      padding-left: 4px;
      box-sizing: border-box;
      div:hover {
        background-color: #ebf5ff;
        color: #45a2ff;
      }
      span {
        margin-left: 10px;
        display: inline-block;
        width: 24px;
        line-height: 1;
        vertical-align: middle;
        img {
          width: 100%;
        }
      }
    }
    .setting.active {
      background-color: #1f88f0;
    }
    .setting {
      float: right;
      width: 84px;
      span {
        display: inline-block;
        width: 24px;
        line-height: 1;
        vertical-align: middle;
        img {
          width: 100%;
        }
      }
    }
    .servies,
    .message {
      width: 88px;
      float: right;
      span {
        display: inline-block;
        width: 27px;
        line-height: 1;
        vertical-align: middle;
        img {
          width: 100%;
        }
      }
    }
    .message {
      font-size: 22px;
      line-height: 64px;
      .message-style {
        display: inline-block;
        width: 100%;
        color: #fff;
        position: relative;
        span {
          position: absolute;
          top: 10px;
          right: 20px;
          background-color: red;
          color: #fff;
          width: 18px;
          height: 18px;
          line-height: 18px;
          border-radius: 50%;
          font-size: 12px;
          text-align: center;
        }
      }
    }
    .message:hover {
      background-color: #1f88f0;
    }
  }
}
.account,
.out {
  padding: 5px;
  margin-bottom: 10px;
}
.settingbg {
  background-color: #1f88f0;
}
</style>
